<template>
  <div class="line-main">
    <div></div>
    <div
      v-for="(v, i) of cloumnData[0]"
      :class="['point-box', getMaxMin(planeIndex, lineIndex, i)]"
      :key="i"
    >
      <el-tooltip placement="top" effect="light">
        <div slot="content">
          <div>层数：{{ i + 1 }}</div>
          <div>行数：{{ planeIndex + 1 }}</div>
          <div>列数：{{ lineIndex + 1 }}</div>
          <div>温度：{{ getData(planeIndex, lineIndex, i) }}</div>
        </div>
        <div @click="pointClick(i, planeIndex, lineIndex)" style="width: 100%; height: 100%"></div>
      </el-tooltip>
    </div>
    <div class="point-base"></div>
  </div>
</template>

<script>
export default {
  name: 'LineComponent',
  props: {
    jsonData: {
      type: Array,
      default: () => {
        return []
      }
    },
    cloumnData: {
      type: Array,
      default: () => {
        return []
      }
    },
    planeIndex: {
      type: Number,
      default: 0
    },
    lineIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    // 数据点的点击事件
    pointClick (i, planeIndex, lineIndex) {
      this.$emit('pointClick', [
        i + 1,
        planeIndex + 1,
        lineIndex + 1,
        this.getData(planeIndex, lineIndex, i),
      ])
    },
    // 根据层列行数据获取对应节点数据
    getData (planeIndex, lineIndex, pointIndex) {
      let str = `[${pointIndex + 1},${planeIndex + 1},${lineIndex + 1}`
      let list = this.jsonData.find(item => JSON.stringify(item).indexOf(str) !== -1)
      return (list && list[3] ? list[3] : '') + ' ℃'
    },
    // 最高数据和最低数据有不一样的颜色样式
    getMaxMin (planeIndex, lineIndex, pointIndex) {
      let className = ''
      let newList = JSON.parse(JSON.stringify(this.jsonData))
      newList.sort((a, b) => {
        return a[3] - b[3]
      })
      let str = `[${pointIndex + 1},${planeIndex + 1},${lineIndex + 1}`
      let curData = newList.find(item => JSON.stringify(item).indexOf(str) !== -1)
      curData = curData ? curData[3] : 0
      if (curData === newList[0][3]) {
        className = 'min-data'
      } else if (curData === newList[newList.length - 1][3]) {
        className = 'max-data'
      }
      return className
    }
  }
}
</script>

<style lang="scss" scoped>
.line-main {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: center;
  position: relative;

  &::before {
    content: "";
    display: inline;
    position: absolute;
    height: 100%;
    width: 5px;
    background-color: #a9b8ee;
    z-index: 1;
  }

  .point-base {
    width: 30px;
    height: 20px;
    background-color: #4a6adb;
    border-radius: 5px;
    z-index: 2;
  }

  .point-box {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #4a6adb;
    z-index: 2;
    cursor: pointer;
  }

  .min-data,
  .max-data {
    transform: scale(1.5);
    position: relative;
    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      left: 2.5px;
      top: 2.5px;
      pointer-events: none;
    }
  }

  .min-data {
    background-color: rgba(109, 212, 0, 0.5);

    &::after {
      background-color: #6dd400;
    }
  }

  .max-data {
    background-color: rgba(224, 32, 32, 0.5);

    &::after {
      background-color: #e02020;
    }
  }
}
</style>
  